
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var title = document.querySelector('#title');
var span = document.querySelector('span');
// 2. 点击弹出层这个链接 link，让模态框背景mask 和 模态框login 显示出来
link.addEventListener('click', function () {
    mask.style.display = 'block';
    login.style.display = 'block';
})
// 3. 点击 span,隐藏 模态框背景mask 和 模态框login 
span.addEventListener('click', function (e) {
    mask.style.display = 'none';
    login.style.display = 'none';
    e.stopPropagation();
    //解决添加了鼠标按下事件（mousedown)后，由于默认是冒泡，会导致点击login模态框的子级span也可以移动模态框的BUG
})
// 4. 开始拖拽
// (1) 当鼠标在模态框中的title区域按下，获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
    // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    document.addEventListener('mousemove', move);
    // 只有按下(mousedown)后才能拖动鼠标(mousemove),所以mousemove要写在mousedown里面
    //在页面中任意地方都可以移动鼠标，所有用document绑定事件
    function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
        //注意：e.pageX,e.pageY,e.offsetLeft,e.offsetTop返回的值都没有单位，所以要用拼接字符串加上单位
    }
    // (3) 当鼠标在浏览器中任意地方弹起的时候（所以依然用document绑定事件），移除之前绑定的鼠标移动(mousemove)的事件(move)
    document.addEventListener('mouseup', function () {
        document.removeEventListener('mousemove', move);
    })
})

